﻿
@{
    ViewBag.Title = "ViewMap";
    Layout = null;
}

<script type="text/javascript">
  
    function MarkerInfor(){
                this.lat = 0;
                this.lon = 0;
                this.posID =0;
                this.posTitle ='';
                this.houseID =0;
                this.postImage ='';
                this.postType ='';
                this.priceday='';
                this.priceweek='';
                this.pricemonth='';
                this.available ='';
            }
    var arrayMarkerInfor = [];

    function getMarkerInfor() {
                // alert("Go to getMarkerInfor");
                 var postTitleElement=document.getElementById("posTitles");
                 var titlestext = postTitleElement.innerHTML;

                 var postImageElement=document.getElementById("postImages");
                 var imagestext = postImageElement.innerHTML;

                 var postTypeElement=document.getElementById("postTypes");
                 var typestext = postTypeElement.innerHTML;

                 var sttElement=document.getElementById("houseAvailables");
                 var sttstext = sttElement.innerHTML; //pricesperday pricesperweek  pricespermonth

                 var pdElement=document.getElementById("pricesperday");
                 var pricedaystext = pdElement.innerHTML;

                 var pwElement=document.getElementById("pricesperweek");
                 var priceweekstext = pwElement.innerHTML;

                 var pmElement=document.getElementById("pricespermonth");
                 var pricemonthstext = pmElement.innerHTML;

                 var titleSplit=titlestext.split("%%");
                 var imageSplit=imagestext.split("%%");
                 var typeSplit=typestext.split("%%");
                 var StatusSplit=sttstext.split("%%");
                 var pDaysSplit=pricedaystext.split("%%");
                 var pWeekSplit=priceweekstext.split("%%");
                 var pMonthSplit=pricemonthstext.split("%%");
                 var index = 0;
                 @foreach (var item in ViewBag.listMarkerInfomation)
                 {
                    <text>         
                         var tempMar = new MarkerInfor();
                         tempMar.lat = @item.lat;
                         tempMar.lon = @item.lon;
                         tempMar.houseID = @item.houseID;
                         tempMar.posID = @item.posID;
                         tempMar.posTitle =titleSplit[index] ; 
                         tempMar.postImage =imageSplit[index] ; 
                         tempMar.postType =typeSplit[index] ; 
                         tempMar.priceday = pDaysSplit[index] ;
                         tempMar.priceweek = pWeekSplit[index] ;
                         tempMar.pricemonth = pMonthSplit[index] ;
                         tempMar.available = StatusSplit[index] ;

                         arrayMarkerInfor[arrayMarkerInfor.length]= tempMar;
                         index ++;
                    </text>
                    }
                    initializes();
            }

    function initializes() {
        //alert('go1');

        //declare points on Map
        var pointCenter=null;

        if(arrayMarkerInfor.length==0) 
        {
            //alert('g2');
            //setdefault point center sau
            pointCenter=new google.maps.LatLng(10.850229, 106.629814);
        } 
        else 
        {
            //alert('g3');
            pointCenter= new google.maps.LatLng(arrayMarkerInfor[0].lat,arrayMarkerInfor[0].lon);
        }
        var icon = new google.maps.MarkerImage("/Content/images/icons/houseIcon.png", null, null, null, 
                                                new google.maps.Size(32, 32));
        //alert('g4');
        //declare Map properties
        var ChmapProp = {
            center: pointCenter,
            zoom: 10,
            //disableDefaultUI:false, //dissable UI control
            panControl:true,
            zoomControl:true,
            zoomControlOptions: {
            style:google.maps.ZoomControlStyle.MEDIUM,
            position:google.maps.ControlPosition.BOTTOM_LEFT
             },
            mapTypeControl:true,
            scaleControl:false,
            streetViewControl:false,
            overviewMapControl:false,
            rotateControl:false, 
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        //create instant map with mapProperty and Element which contain map
        var Chmap = new google.maps.Map(document.getElementById("googleMap"), ChmapProp);
        var infowindow = new google.maps.InfoWindow(), marker, i;
        //add marker to map
        for (i = 0; i < arrayMarkerInfor.length; i++) {  
     
           marker = new google.maps.Marker({
               position: new google.maps.LatLng(arrayMarkerInfor[i].lat, arrayMarkerInfor[i].lon),
                           //animation:google.maps.Animation.BOUNCE,//animate marker
                           icon: icon,
                           map: Chmap,
                           title: arrayMarkerInfor[i].posTitle,
                          });
          //set event to each marker
          google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
            var content ='<div id="contentinfoWindow" style="overflow:hidden;width:310px;background-color:#FAFAFA;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; ">'+
                            '<table> <tr><td style="width:100px;"><img src="' + arrayMarkerInfor[i].postImage 
                            + '" style="width:100px;height:100px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;"alt="Img"/></td>'
                            +'<td style="width:210px;">House type : ' + arrayMarkerInfor[i].postType 
                            +'<br/>Status: '+ arrayMarkerInfor[i].available
                            +'<br/>Price per day: '+ arrayMarkerInfor[i].priceday
                            +'<br/>Price per week: '+ arrayMarkerInfor[i].priceweek
                            +'<br/>Price per month: '+ arrayMarkerInfor[i].pricemonth
                            +'</td></tr> ' +
                            '<tr><td colspan = "2"><a href="/Posts/ViewPost?postID='+ arrayMarkerInfor[i].posID + '">' + arrayMarkerInfor[i].posTitle 
                            + '</a></td>'+'</tr> </table> </div>';
                infowindow.setContent(content);
                infowindow.open(Chmap, marker);
            }
         })(marker, i));
        } //end for

        //add event listener when user click to somewhere on map
        google.maps.event.addListener(Chmap, 'click', function(event) { infowindow.open(null,null);});

    } //end initialize

    function placeMarker(loc,cmap) {
        var infom = loc.lat() + ',' + loc.lng();
        //alert(infom);
        document.getElementById("pos").innerHTML=infom;

    }
    google.maps.event.addDomListener(window, 'load', initialize);
    
</script>
<div id="body"></div>
<div style="color: #1D95CB;font-weight: bold;font-size: 1.23em;margin-left: 350px"><div><p style="float:left">There are </p> <p style="font-size: 18px;color:darkred;float:left;margin-left: 5px;margin-right: 5px"> @ViewBag.numberHouse</p>
 <p>house(s) in <label id="nameprovince" style="color: darkred;font-weight: bold"></label> province</p></div></div>
<div style='visibility:hidden;' id = 'posTitles'>@ViewBag.posTitles</div>
<div style='visibility:hidden;' id = 'postImages'>@ViewBag.postImages</div>
<div style='visibility:hidden;' id = 'postTypes'>@ViewBag.postTypes</div>

<div style='visibility:hidden;' id = 'houseAvailables'>@ViewBag.houseAvailables</div>
<div style='visibility:hidden;' id = 'pricesperday'>@ViewBag.pricesperday</div>
<div style='visibility:hidden;' id = 'pricesperweek'>@ViewBag.pricesperweek</div>
<div style='visibility:hidden;' id = 'pricespermonth'>@ViewBag.pricespermonth</div>

<div style='background-color:Yellow;' id="pos"></div>
<div id="googleMap" style="width:870px;height:900px;position: absolute;left:265px;top:70px"></div>

<script type="text/javascript">
    getMarkerInfor("body");
    var nameprovince = $("[id*='ddlprovince'] :selected").text();
    $('#nameprovince').html(nameprovince);
</script>